<template>
    <table style="display: block;margin-top: 20px;">
        <tbody>
            <tr>
                <td>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[1, 3, 10, 50]" :page-size="pageSize" :total="totalCount"
                        layout="slot, sizes">
                        当前共有 {{ totalCount }} 条数据
                        当前共有 {{ totalPage }} 页
                        当前 {{ currentPage }}/{{ totalPage }} 页
                    </el-pagination>
                </td>
                <td>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[1, 3, 10, 50]" :page-size="pageSize" :total="totalCount"
                        layout="slot, prev, pager, next" prev-text="上一页" next-text="下一页" background>
                        <el-button class="btn-prev" @click="goToFirstPage" :disabled="currentPage === 1">
                            首页
                        </el-button>
                    </el-pagination>
                </td>
                <td>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[1, 3, 10, 50]" :page-size="pageSize" :total="totalCount"
                        layout="slot, jumper">
                        <el-button class="btn-prev" @click="goToLastPage" :disabled="currentPage === totalPage">
                            尾页
                        </el-button>
                    </el-pagination>
                </td>
            </tr>
        </tbody>
    </table>
</template>


<script setup lang="ts">

//定义需要传入的属性
const props = defineProps({
    currentPage: {
        type: Number,
        required: true
    },
    pageSize: {
        type: Number,
        required: true
    },
    totalCount: {
        type: Number,
        required: true
    },
    totalPage: {
        type: Number,
        required: true
    }
});

//定义需要传递的事件
const emit = defineEmits(['size-change', 'current-change']);

const handleSizeChange = (size: number) => {
    emit('size-change', size);
};

const handleCurrentChange = (page: number) => {
    emit('current-change', page);
};

const goToFirstPage = () => {
    handleCurrentChange(1);
};

const goToLastPage = () => {
    handleCurrentChange(props.totalPage); // 使用 props.totalPage
};

</script>

<style scoped>
.btn-prev {
    margin-right: 10px;
}
</style>